<template>
  <div>
    <a-card :bordered="false" style="padding: 0px;">
      <a-row>
        <a-col :sm="4" :xs="24" style="background: #f6f8f9;">
          <div class="detail-handle">



            <div v-has="'remain:parentshow'" style="height: 85px">
              <p>上级</p>
              <h3 style="margin-top: -20px;width: 200px">{{ parentName }}</h3>
              <h3 style="margin-top: -10px;width: 200px">{{ parentTel  }}</h3>
            </div>

            <div v-has="'remain:todayInfo'" style="height: 85px">
              <p>今日工作时长</p>
              <h3>{{ workHour }}</h3>
            </div>
            <div v-has="'usedDay:show'" style="height: 85px">
              <p style="margin-top: 10px">消耗工时</p>
              <h3 style="margin-top: -20px;width: 200px">{{ workDayTotal }}天</h3>
            </div>
            <div v-has="'remain:show'" style="height: 65px">
              <p style="margin-top: 10px">剩余工时</p>
              <h3 style="margin-top: -20px;width: 200px">{{ workHourRemain }}天</h3>
            </div>
            <div v-has="'remain:notshow'" style="height: 85px">
            </div>

          </div>
        </a-col>
        <a-col :sm="20" :xs="24">
          <bar title="" :dataSource="barData" style="height: 200px" :height="200" yaxis-text="分钟"/>
        </a-col>
      </a-row>


      <div id="components-grid-demo-flex" style="margin-top: 10px">
        <a-row justify="space-between"  style="padding: 8px" >
          <a-col :span="4" v-has="'workTime:show'">
            <h4  style="display:inline">本日工作时长:   </h4>
            <h3  style="display:inline;font-weight: bold">{{ workTimeDay }}</h3>
          </a-col>
          <a-col :span="4" v-has="'workTime:show'">
            <h4  style="display:inline">本周工作时长:   </h4>
            <h3  style="display:inline;font-weight: bold">{{ workTimeWeek }}</h3>
          </a-col>
          <a-col :span="4" v-has="'workTime:show'">
            <h4  style="display:inline">本月工作时长:   </h4>
            <h3  style="display:inline;font-weight: bold">{{ workTimeMonth }}</h3>
          </a-col>

          <a-col :span="4" v-has="'workDay:show'">
            <h4  style="display:inline">本日工时消耗:   </h4>
            <h3  style="display:inline;font-weight: bold">&nbsp;&nbsp;{{ workDayDay }}</h3>
          </a-col>
          <a-col :span="4" v-has="'workDay:show'">
            <h4  style="display:inline">本周工时消耗:   </h4>
            <h3  style="display:inline;font-weight: bold">&nbsp;&nbsp;{{ workDayWeek}}</h3>
          </a-col>
          <a-col :span="4" v-has="'workDay:show'">
            <h4  style="display:inline">本月工时消耗:   </h4>
            <h3  style="display:inline;font-weight: bold">&nbsp;&nbsp;{{ workDayMonth }}</h3>
          </a-col>

        </a-row>
      </div>



      <div style="margin-top: 10px">
        <a-spin style="margin-top: 20px;margin-left: 48%" :spinning="spinning"/>

        <a-table v-if="!spinning"
                 v-has='"parent:dataList"'
                 ref="table"
          bordered
          size="middle"
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :loading="loading"
          :pagination="ipagination"
          @change="handleTableChange">
          <template slot="avatarslot" slot-scope="text, record, index">
            <div class="anty-img-wrap">
              <a-avatar shape="square" :src="getAvatarView(record.avatar)" icon="user"/>
            </div>
          </template>
          <span slot="action" slot-scope="text, record">

          <a-dropdown >
            <a class="ant-dropdown-link">
              更多操作 <a-icon type="down"/>
            </a>
            <a-menu slot="overlay" >
               <a-menu-item v-has='"person:workPlace"'>
                <a href="javascript:;" @click="handlePlace(record)" >工作台</a>
               </a-menu-item>
              <a-menu-item v-has='"person:edit"'>
                <a href="javascript:;" @click="handleEdit1(record)">编辑</a>
               </a-menu-item>
               <a-menu-item v-has='"person:detail"'>
                <a href="javascript:;" @click="handleDetail(record)">详情</a>
               </a-menu-item>
              <a-menu-item v-has = '"person:changePassword"'>
                <a href="javascript:;" @click="handleChangePassword(record.username)" >修改密码</a>
              </a-menu-item>

              <a-menu-item v-has = '"person:remove"'>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>

              <a-menu-item v-if="record.status==1" v-has = '"person:froze"'>
                <a-popconfirm title="确定冻结吗?" @confirm="() => handleFrozen(record.id,2,record.username)">
                  <a>冻结</a>
                </a-popconfirm>
              </a-menu-item>

              <a-menu-item v-if="record.status==2" v-has = '"person:froze"'>
                <a-popconfirm title="确定解冻吗?" @confirm="() => handleFrozen(record.id,1,record.username)">
                  <a>解冻</a>
                </a-popconfirm>
              </a-menu-item>

            </a-menu>
          </a-dropdown>


        </span>
        </a-table>






        <a-table v-if="!spinning"
                 v-has='"worker:dataList"'
                 ref="table"
                 bordered
                 size="middle"
                 rowKey="id"
                 :columns="columnsWorker"
                 :dataSource="dataSource"
                 :loading="loading"
                 :pagination="ipagination"
                 @change="handleTableChange">
          <template slot="avatarslot" slot-scope="text, record, index">
            <div class="anty-img-wrap">
              <a-avatar shape="square" :src="getAvatarView(record.avatar)" icon="user"/>
            </div>
          </template>
          <span slot="action" slot-scope="text, record">

          <a-dropdown v-has='"worker:dataList"'>
            <a class="ant-dropdown-link">
              更多操作 <a-icon type="down"/>
            </a>
            <a-menu slot="overlay" >
               <a-menu-item v-has='"person:workPlace"'>
                <a href="javascript:;" @click="handlePlace(record)" >工作台</a>
               </a-menu-item>
              <a-menu-item v-has='"person:edit"'>
                <a href="javascript:;" @click="handleEdit1(record)">编辑</a>
               </a-menu-item>
               <a-menu-item v-has='"person:detail"'>
                <a href="javascript:;" @click="handleDetail(record)">详情</a>
               </a-menu-item>
              <a-menu-item v-has = '"person:changePassword"'>
                <a href="javascript:;" @click="handleChangePassword(record.username)" >修改密码</a>
              </a-menu-item>

              <a-menu-item v-has = '"person:remove"'>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>

              <a-menu-item v-if="record.status==1" v-has = '"person:froze"'>
                <a-popconfirm title="确定冻结吗?" @confirm="() => handleFrozen(record.id,2,record.username)">
                  <a>冻结</a>
                </a-popconfirm>
              </a-menu-item>

              <a-menu-item v-if="record.status==2" v-has = '"person:froze"'>
                <a-popconfirm title="确定解冻吗?" @confirm="() => handleFrozen(record.id,1,record.username)">
                  <a>解冻</a>
                </a-popconfirm>
              </a-menu-item>

            </a-menu>
          </a-dropdown>


        </span>
        </a-table>




      </div>

      <user-modal ref="modalForm" @ok="loadData2" ></user-modal>

      <password-modal ref="passwordmodal" ></password-modal>

      <sys-user-agent-modal ref="sysUserAgentModal"></sys-user-agent-modal>


    </a-card>

    <!--<a-card
      style="margin-top: 24px"
      :bordered="false"
      title="最近一周访问量统计">
      <a-row>
        <a-col :span="6">
          <head-info title="今日IP" :content="loginfo.todayIp"></head-info>
        </a-col>
        <a-col :span="2">
          <a-spin class='circle-cust'>
            <a-icon slot="indicator" type="environment" style="font-size: 24px"/>
          </a-spin>
        </a-col>
        <a-col :span="6">
          <head-info title="今日访问" :content="loginfo.todayVisitCount"></head-info>
        </a-col>
        <a-col :span="2">
          <a-spin class='circle-cust'>
            <a-icon slot="indicator" type="team" style="font-size: 24px"/>
          </a-spin>
        </a-col>
        <a-col :span="6">
          <head-info title="总访问量" :content="loginfo.totalVisitCount"></head-info>
        </a-col>
        <a-col :span="2">
          <a-spin class='circle-cust'>
            <a-icon slot="indicator" type="rise" style="font-size: 24px"/>
          </a-spin>
        </a-col>
      </a-row>
      <line-chart-multid :fields="visitFields" :dataSource="visitInfo"></line-chart-multid>

    </a-card>-->
  </div>




</template>

<script>
import {filterObj} from '@/utils/util'
import ChartCard from '@/components/ChartCard'
import ACol from "ant-design-vue/es/grid/Col"
import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
import MiniArea from '@/components/chart/MiniArea'
import MiniBar from '@/components/chart/MiniBar'
import MiniProgress from '@/components/chart/MiniProgress'
import RankList from '@/components/chart/RankList'
import Bar from '@/components/chart/Bar'
import LineChartMultid from '@/components/chart/LineChartMultid'
import HeadInfo from '@/components/tools/HeadInfo.vue'
import {BorderOutlined} from '@ant-design/icons-vue';
import Trend from '@/components/Trend'
import Rate from 'ant-design-vue/es/vc-rate/src/Rate'
import {getAction, postAction} from '@/api/manage'
import {getLoginfo, getVisitInfo} from "@api/api";


import {putAction,getFileAccessHttpUrl} from '@/api/manage';
import {frozenBatch} from '@/api/api'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import JInput from '@/components/jeecg/JInput'
import JSuperQuery from '@/components/jeecg/JSuperQuery'
import JThirdAppButton from '@/components/jeecgbiz/thirdApp/JThirdAppButton'
import {USER_INFO} from "@/store/mutation-types";
import Vue from 'vue'

import UserModal from '../system/modules/UserModal'
import PasswordModal from '../system/modules/PasswordModal'
import SysUserAgentModal from "../system/modules/SysUserAgentModal";
import {deleteAction} from '@/api/manage'

const data = []
const dataDone = []
const barData = []

export default {
  name: "StandardList",
  mixins: [JeecgListMixin],
  components: {
    JThirdAppButton,
  SysUserAgentModal,
  UserModal,
  PasswordModal,
    JInput,
    JSuperQuery,
    ATooltip,
    ACol,
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    LineChartMultid,
    HeadInfo,
    Rate,
    BorderOutlined
  },
  data() {
    return {
      dictOptions:[],

      // 分页参数
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      // 查询条件
      queryParam: {},
      columns: [
        /*{
          title: '#',
          dataIndex: '',
          key:'rowIndex',
          width:60,
          align:"center",
          customRender:function (t,r,index) {
            return parseInt(index)+1;
          }
        },*/
        {
          title: '头像',
          align: "center",
          width: 50,
          dataIndex: 'avatar',
          scopedSlots: {customRender: "avatarslot"}
        },
        {
          title: '用户',
          align: "center",
          dataIndex: 'username',
          width: 120,
        },
        {
          title: '姓名',
          align: "center",
          width: 100,
          dataIndex: 'realname',
        },

        /*
                {
                  title: '性别',
                  align: "center",
                  width: 50,
                  dataIndex: 'sex_dictText',
                },*/
        /*{
          title: '所属公司',
          align: "center",
          width: 180,
          dataIndex: 'parentName'
        },*/
        /*{
          title: '工作状态',
          align: "center",
          width: 80,
          dataIndex: 'workFlag',
          customRender: (text, record) => {
            if (text === 0) {
              return '停止工作'
            } else if (text === 1) {
              return '工作中'
            }
          }
        },*/
        {
          title: '发展规模',
          align: "center",
          width: 80,
          dataIndex: 'childNum',

        },{
          title: '账号状态',
          align: "center",
          width: 80,
          dataIndex: 'status',
          customRender: (text, record) => {
            if (text === 1) {
              return '正常'
            } else {
              return '已冻结'
            }
          }
        },
        {
          title: '剩余工时',
          align: "center",
          width: 150,
          dataIndex: 'remainingWork'
        },
        {
          title: '本日工时消耗',
          align: "center",
          width: 150,
          dataIndex: 'workDayDay'
        },
        {
          title: '本周工时消耗',
          align: "center",
          width: 150,
          dataIndex: 'workDayWeek'
        },
        {
          title: '本月工时消耗',
          align: "center",
          width: 150,
          dataIndex: 'workDayMonth'
        },{
          title: '累计工时消耗',
          align: "center",
          width: 150,
          dataIndex: 'workDayTotal'
        },

       /* {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: {customRender: 'action'},
          align: "center",
          width: 170
        }*/

      ],



      columnsWorker: [
        /*{
          title: '#',
          dataIndex: '',
          key:'rowIndex',
          width:60,
          align:"center",
          customRender:function (t,r,index) {
            return parseInt(index)+1;
          }
        },*/
        {
          title: '头像',
          align: "center",
          width: 50,
          dataIndex: 'avatar',
          scopedSlots: {customRender: "avatarslot"}
        },
        {
          title: '员工',
          align: "center",
          dataIndex: 'username',
          width: 120,
        },
        {
          title: '姓名',
          align: "center",
          width: 100,
          dataIndex: 'realname',
        },

        /*
                {
                  title: '性别',
                  align: "center",
                  width: 50,
                  dataIndex: 'sex_dictText',
                },*/
        {
          title: '所属公司',
          align: "center",
          width: 180,
          dataIndex: 'parentName'
        },
        {
          title: '工作状态',
          align: "center",
          width: 80,
          dataIndex: 'workFlag',
          customRender: (text, record) => {
            if (text === 0) {
              return '停止工作'
            } else if (text === 1) {
              return '工作中'
            }
          }
        },
        {
          title: '账号状态',
          align: "center",
          width: 80,
          dataIndex: 'status',
          customRender: (text, record) => {
            if (text === 1) {
              return '正常'
            } else {
              return '已冻结'
            }
          }
        },

        {
          title: '本日工作时长',
          align: "center",
          width: 150,
          dataIndex: 'workTimeDay'
        },{
          title: '本日工时消耗',
          align: "center",
          width: 150,
          dataIndex: 'workDayDay'
        },
        {
          title: '本周工时消耗',
          align: "center",
          width: 150,
          dataIndex: 'workDayWeek'
        },
        {
          title: '本月工时消耗',
          align: "center",
          width: 150,
          dataIndex: 'workDayMonth'
        },{
          title: '累计工时消耗',
          align: "center",
          width: 150,
          dataIndex: 'workDayTotal'
        },

         {
           title: '操作',
           dataIndex: 'action',
           scopedSlots: {customRender: 'action'},
           align: "center",
           width: 170
         }

      ],




      url: {
        syncUser: "/act/process/extActProcess/doSyncUser",
        list: "/sys/user/list",
        delete: "/sys/user/delete",
        deleteBatch: "/sys/user/deleteBatch",
        exportXlsUrl: "/sys/user/exportXls",
        importExcelUrl: "sys/user/importExcel",
      },
      data,
      dataDone,
      barData,
      loginfo: {},
      visitFields:['ip','visit'],
      visitInfo:[],
      params: {},
      dataFlag: true,
      spinning: false,
      userId: null,
      workHour: "",
      workTimeDay: "",
      workTimeWeek: "",
      workTimeMonth: "",
      workDayDay: "",
      workDayWeek: "",
      workDayMonth: "",
      workDayTotal: "",





      workHourRemain: "",
      parentName: "",
      parentTel: "",
      model: {
        title: '',
      },
      fileDetails: [],
      //数据集
      dataSource: [],
      isorter: {
        column: 'createTime',
        order: 'desc',
      }
    }
  },
  created() {
    this.loadData();
    this.loadData2();
    this.initLogInfo();
  },
  methods: {
    handleEdit1: function (record) {
      this.initPart();
      this.$refs.modalForm.edit(record);
      this.$refs.modalForm.title = "编辑";
      this.$refs.modalForm.disableSubmit = false;
      this.$refs.modalForm.roleDisabled = true
      this.$refs.modalForm.departDisabled = true
      this.$refs.modalForm.departSelectDisabled = false
      this.$refs.modalForm.type = 1
      this.$refs.modalForm.initPart();
    },
    initPart(){
      getAction('/sys/user/queryPart',{type:"1"}).then(res=>{
        if(res.success){
          this.dictOptions = res.result.map((item,index,arr)=>{
            let c = {label:item.name, value: item.id+""}
            return c;
          })
        }
      })
    },
    handleDelete: function (id) {
      var that = this;
      deleteAction(that.url.delete, {id: id}).then((res) => {
        if (res.success) {
          that.$message.success(res.message);
          that.loadData2();
        } else {
          that.$message.warning(res.message);
        }
      });
    },

    handleTableChange(pagination, filters, sorter){
      //TODO 筛选
      if (Object.keys(sorter).length>0){
        this.isorter.column = sorter.field;
        this.isorter.order = "ascend"==sorter.order?"asc":"desc"
      }
      this.ipagination = pagination;
      this.loadData2();
    },
    handlePlace: function (record) {
      console.log(record.id)
      this.$router.push({path: '/dashboard/WorkplaceRoute', query: {userId:record.id}})
    },
    getAvatarView: function (avatar) {
      return getFileAccessHttpUrl(avatar)
    },
    loadData2(arg) {
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1;
      }
      this.spinning = true;
      var params = this.getQueryParams();//查询条件
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records;
          this.ipagination.total = res.result.total;
          this.spinning = false;
        }
          this.spinning = false;
      })
    },
    getQueryParams() {
      this.queryParam = { type : "3" }
      var param = Object.assign({}, this.queryParam, this.isorter);
      param.field = this.getQueryField();
      param.pageNo = this.ipagination.current;
      param.pageSize = this.ipagination.pageSize;
      param.homeFlag = '1';
      return filterObj(param);
    },
    getQueryField() {
      //TODO 字段权限控制
    },
    loadData() {
      getAction('/sysUserReport/workHour', {userId: this.userId}).then(res => {
        console.log(res)
        if (res.success) {
          this.workHour = res.result.workTime;
          this.workTimeDay = res.result.workTimeDay;
          this.workTimeWeek = res.result.workTimeWeek;
          this.workTimeMonth = res.result.workTimeMonth;
          this.workDayDay = res.result.workDayDay;
          this.workDayWeek = res.result.workDayWeek;
          this.workDayMonth = res.result.workDayMonth;
          this.workDayTotal = res.result.workDayTotal;
          this.workHourRemain = res.result.workHourRemain ;
          this.parentName = res.result.parentName;
          this.parentTel = res.result.parentTel;
        }
      });
      getAction('/sysUserReport/workHourChar', {userId: this.userId}).then(res => {
        console.log("userid"+this.userId)
        console.log("workdetail:"+res)
        if (res.success) {
          let list = res.result;
          for (let i = 0; i < list.length; i++) {
            barData.push({
              x: list[i].dayShort+'日',
              y: list[i].workHour
            })
          }
        }
      });
      getAction('/sysUserReport/list', {userId: this.userId}).then(res => {
        console.log(res)
        if (res.success) {
          let list = res.result;
          this.fileDetails = [];
          for (let i = 0; i < list.length; i++) {
            this.dataFlag = false;
            if (i > 3) {
              break;
            }
            this.fileDetails.push({
              imgUrl: list[i].pic,
              dates: list[i].dates,
              strength: parseInt(list[i].strength)
            })
          }
          this.dataSource.push({
            key: 0,
            fileDetails: this.fileDetails
          })
        }
      });
    },
    allWork() {
      this.$router.push({path: '/jeecg/ImagPreview', params: {}})
    },
    initLogInfo() {
      getLoginfo(null).then((res) => {
        if (res.success) {
          Object.keys(res.result).forEach(key => {
            res.result[key] = res.result[key] + ""
          })
          this.loginfo = res.result;
        }
      })
      getVisitInfo().then(res => {
        if (res.success) {
          this.visitInfo = res.result;
        }
      })
    },
    doneWork(obj) {
      console.log(obj.target.id)
      postAction("/system/sysUserPlan/" + obj.target.id + "/1", this.model).then((res) => {
        if (res.success) {
          this.getUndoWork()
          this.getDoneWork()
          this.$message.success(res.message)
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    writeReport() {
      this.$router.push({path: '/system/SysUserDailyList', params: {}})
    },
    addWork() {
      if (this.model.title == '') {
        return;
      }
      postAction("/system/sysUserPlan/add", this.model).then((res) => {
        if (res.success) {
          this.getUndoWork()
          this.model.title = ''
          this.$message.success(res.message)
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    getUndoWork() {
      getAction("/system/sysUserPlan/undo/list").then((res) => {
        if (res.success) {
          let size = res.result.length;
          this.data = [];
          for (let i = 0; i < size; i++) {
            this.data.push({
              title: res.result[i].title,
              id: res.result[i].id,
              startAt: '2018-07-26 22:44'
            })
          }
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    getDoneWork() {
      getAction("/system/sysUserPlan/done/list").then((res) => {
        if (res.success) {
          let size = res.result.length;
          this.dataDone = [];
          for (let i = 0; i < size; i++) {
            this.dataDone.push({
              title: res.result[i].title,
              id: res.result[i].id,
              startAt: '2018-07-26 22:44'
            })
          }
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    handleFrozen: function (id, status, username) {
      let that = this;
      //TODO 后台校验管理员角色
      if ('admin' == username) {
        that.$message.warning('管理员账号不允许此操作！');
        return;
      }
      frozenBatch({ids: id, status: status}).then((res) => {
        if (res.success) {
          that.$message.success(res.message);
          that.loadData2();
        } else {
          that.$message.warning(res.message);
        }
      });
    },
    handleChangePassword(username) {
      this.$refs.passwordmodal.show(username);
    },
  }
}
</script>

<style lang="less" scoped>
.ant-avatar-lg {
  width: 48px;
  height: 48px;
  line-height: 48px;
}

.list-content-item {
  color: rgba(0, 0, 0, .45);
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  margin-left: 40px;

  span {
    line-height: 20px;
  }

  p {
    margin-top: 4px;
    margin-bottom: 0;
    line-height: 22px;
  }
}

.detail-handle {
  width: 200px;
  height: 100%;
  padding: 30px 0 30px 30px;
  box-sizing: border-box;
}

.fl {
  float: left;
  margin-top: 6px;
}

.detail-handle h3 {
  font-size: 20px;
  color: #092235;
  line-height: 30px;
  font-weight: 700;
}

.detail-handle p {
  font-size: 14px;
  color: #9ca6ae;
  line-height: 20px;
  margin-bottom: 20px;
}

.detail-handle i {
  font-size: 14px;
  color: #008bf7;
  cursor: pointer;
}

::v-deep .wrapper li {
  margin-right: 0px;
}

.ant-rate {
  color: #3fd153;
  font-size: 10px;
}

.meta {
  margin-top: 5px;
  margin-bottom: 10px;
  line-height: 0px;
}

.meta p {
  font-size: 12px;
  line-height: 20px;
  margin-bottom: 10px
}

.ant-list-item-meta {
  flex: 0;
}

#components-grid-demo-flex :deep(.ant-row) {
  background: rgba(128, 128, 128, 0.08);
}

</style>